<template>
  <el-page-header
    content="项目详情"
    @back="router.back"
    style="margin-bottom: 20px"
  />
  <el-card>
    <el-descriptions :column="4">
      <el-descriptions-item label="客户名称">联想</el-descriptions-item>
      <el-descriptions-item label="商务">邹延达</el-descriptions-item>
      <el-descriptions-item label="客户合同">200</el-descriptions-item>
      <el-descriptions-item label="账号总数">10</el-descriptions-item>
      <el-descriptions-item label="项目金额">200000</el-descriptions-item>
      <el-descriptions-item label="项目成本">100000</el-descriptions-item>
      <el-descriptions-item label="项目返点">2000</el-descriptions-item>
      <el-descriptions-item label="利润率">50%</el-descriptions-item>
    </el-descriptions>
    <el-button type="primary" style="margin-bottom: 20px" @click="addAcount">新增账号</el-button>
    <EditTable v-bind="{ ...tableProps }" />
    <!-- <el-table :data="tableData" row-key="name">
      <el-table-column type="index" label="序号" />
      <el-table-column prop="name" label="账号名称" ></el-table-column>
      <el-table-column prop="platform" label="平台"></el-table-column>
      <el-table-column prop="quotation" label="报价"></el-table-column>
      <el-table-column prop="cost" label="成本"></el-table-column>
      <el-table-column prop="rebate" label="返点"></el-table-column>
      <el-table-column prop="payBack" label="返点回款"></el-table-column>
      <el-table-column prop="schedule" label="发布档期" />
      <el-table-column prop="link" label="发布链接" />
      <el-table-column prop="read" label="阅读" />
      <el-table-column prop="like" label="点赞" />
      <el-table-column prop="comment" label="评论" />
      <el-table-column prop="collect" label="收藏" />
      <el-table-column prop="forward" label="转发" />
      <el-table-column prop="play" label="播放" />
      <el-table-column prop="costSide" label="成本方" />
      <el-table-column prop="contract" label="成本方合同" />
      <el-table-column prop="isPay" label="是否付款" />
     <el-table-column label="操作" fixed="right" width="120" v-slot="{ row }">
        <el-button type="text">编辑</el-button>
        <el-button type="text">删除</el-button>
    </el-table-column>
    </el-table> -->
  </el-card>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import EditTable from "@/components/EditTable/index.vue";
import { ElMessage } from "element-plus";
interface AccountInfo {
  id: number;
  name: string;
  platform?: string;
  quotation?: string;
  cost?: string;
  rebate?: string;
  payBack?: boolean;
  schedule?: string;
  link?: string;
  read?: string;
  like?: string;
  comment?: string;
  collect?: string;
  forward?: string;
  play?: string;
  costSide?: string;
  contract?: string;
  isPay?: boolean;
  isEdit?: boolean;
}
let id = 0;
const router = useRouter();
const tableProps = reactive({
  tableData :<{ [key: string]: any;}[]> [
    {
      id: 1,
      name: "金金子吃不饱",
      platform: "小红书",
      quotation: "10000",
      cost: "8000",
      rebate: "200",
      payBack: false,
      schedule: "2021-12-22",
      link: "http://www.baidu.com",
      read: "100",
      like: "100",
      comment: "100",
      collect: "100",
      forward: "100",
      play: "100",
      costSide: "深圳市宸扬文化传播有限公司",
      contract: "合同",
      isPay: false,
      isEdit: false,
    },
  ],
  formInitData: {
    name: "",
    platform: "",
    quotation: null,
    cost: null,
    rebate: null,
  },
  rules: {
    name: [
      {
        required: true,
        message: "请填写名称",
        trigger: "blur",
      },
    ],
  },
  columns: [
    {
      prop: "name",
      label: "账号名称",
      type: "input",
    },
    {
      prop: "platform",
      label: "平台",
      type: "input",
    },
    {
      prop: "quotation",
      label: "报价",
      type: "input",
    },
    {
      prop: "cost",
      label: "成本",
      type: "input",
    },
    {
      prop: "rebate",
      label: "返点",
      type: "input",
    },
    {
      prop: "payBack",
      label: "返点回款",
      type: "switch",
    },
    {
      prop: "schedule",
      label: "发布档期",
      type: "date",
    },
    {
      prop: "link",
      label: "发布链接",
      type: "input",
    },
    {
      prop: "read",
      label: "阅读",
      type: "input",
    },
    {
      prop: "like",
      label: "点赞",
      type: "input",
    },
    {
      prop: "comment",
      label: "评论",
      type: "input",
    },
    {
      prop: "collect",
      label: "收藏",
      type: "input",
    },
    {
      prop: "forward",
      label: "转发",
      type: "input",
    },
    {
      prop: "play",
      label: "播放",
      type: "input",
    },
    {
      prop: "costSide",
      label: "成本方",
      type: "input",
    },
    {
      prop: "contract",
      label: "成本方合同",
      type: "input",
    },
    {
      prop: "isPay",
      label: "是否付款",
      type: "switch",
    },
  ],
});
function addAcount() {
  if (tableProps.tableData.find((item) => item.isEdit)) {
    ElMessage({
      message: "一次只能编辑一条",
      type: "warning",
    });
    return;
  }
  tableProps.tableData.push({
    id: id++,
    name: "",
    platform: "",
    quotation: "",
    cost: "",
    rebate: "",
    isEdit: true,
  });
}
function goBack() {
  router.back();
}
</script>
